<!--
 * @Description: 第十四章 父子组件传参 子组件
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-15 16:42:32
-->
<template>
  <div>
    <p>子级</p>
    <div>
      <p>接收父级传过来的值</p>
      <div>
        <p>接收到父级传过来的title1值：{{ title1 }}</p>
        <p>没有接收到父级传过来的title2值：{{ title2 }}</p>
        <p>接收到父级传过来的arr值：{{ arr }}</p>
      </div>
    </div>
    <div>
      <p>子组件向父组件传值</p>
      <div>
        <button @click="sendToFather">给父组件传值</button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
// 接收父组件传过来的title name的值
// const props = defineProps({
//   title1: {
//     type: String,
//     default: 'title1 默认值',
//   },
//   title2: {
//     type: String,
//     default: 'title2 默认值',
//   },
// })

// 以上接收父值的类型时也可以使用以下方式
// withDefaults 是 TS 特有的，用来给defineProps定义默认值
const props = withDefaults(
  defineProps<{
    title1: string
    title2?: string
    arr: number[]
  }>(),
  {
    // 需要用函数返回值作为默认值
    title2: () => 'title2 默认值',
  },
)

// 传过来的值没办法直接使用
// console.log(title1) 这样会报错
// 要为defineProps声明一个变量才能使用
console.log('title1: ', props.title1)
console.log('title2: ', props.title2)
console.log('arr: ', props.arr)

// 给父组件传值使用defineEmits
const emit = defineEmits<{
  (e: 'on-click', name: string): void
}>()
const sendToFather = () => {
  emit('on-click', 'IA')
}

defineExpose({
  name: 'defineExpose name IA!',
  open: () => console.log('defineExpose fn open!'),
})
</script>
<style scoped></style>
